{% extends "xhs/layout.html" %}

{% block title %}小红书爬虫工具 - 小红书数据管理系统{% endblock %}

{% block page_title %}小红书爬虫工具{% endblock %}

{% block styles %}
<style>
    .crawler-iframe-container {
        width: 100%;
        height: calc(100vh - 200px);
        min-height: 600px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        background-color: #fff;
    }
    
    .crawler-iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    
    .crawler-status {
        margin-bottom: 1rem;
        padding: 0.75rem;
        border-radius: 0.5rem;
        background-color: #f8f9fa;
        border-left: 4px solid var(--primary-color);
    }
    
    .crawler-status.loading {
        border-left-color: var(--warning-color);
    }
    
    .crawler-status.error {
        border-left-color: var(--danger-color);
    }
    
    .crawler-status.success {
        border-left-color: var(--success-color);
    }
    
    .spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 0.2rem solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top-color: var(--primary-color);
        animation: spin 1s linear infinite;
        margin-right: 0.5rem;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .error-container {
        padding: 2rem;
        text-align: center;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .error-icon {
        font-size: 3rem;
        color: var(--danger-color);
        margin-bottom: 1rem;
    }
    
    .error-message {
        margin-bottom: 1.5rem;
        color: #6c757d;
    }
    
    .error-details {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        text-align: left;
        font-family: monospace;
        margin-bottom: 1.5rem;
        max-height: 200px;
        overflow-y: auto;
        white-space: pre-wrap;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-spider me-2"></i>小红书爬虫工具</h5>
                <div>
                    <button id="refresh-iframe" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    <button id="restart-service" class="btn btn-sm btn-outline-warning">
                        <i class="fas fa-power-off"></i> 重启服务
                    </button>
                    <a href="{{ crawler_url }}" target="_blank" class="btn btn-sm btn-primary">
                        <i class="fas fa-external-link-alt"></i> 新窗口打开
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div id="crawler-status" class="crawler-status loading">
                    <span class="spinner"></span>
                    <span id="status-text">正在加载爬虫应用...</span>
                </div>
                
                {% if error %}
                <div class="error-container">
                    <div class="error-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <h4>爬虫服务启动失败</h4>
                    <p class="error-message">尝试启动爬虫服务时发生错误，请检查日志或尝试重启服务。</p>
                    <div class="error-details">{{ error }}</div>
                    <button id="retry-button" class="btn btn-primary">
                        <i class="fas fa-redo"></i> 重试
                    </button>
                </div>
                {% else %}
                <div class="crawler-iframe-container">
                    <iframe id="crawler-iframe" class="crawler-iframe" src="{{ crawler_url }}" allowfullscreen></iframe>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const iframe = document.getElementById('crawler-iframe');
        const statusDiv = document.getElementById('crawler-status');
        const statusText = document.getElementById('status-text');
        const refreshBtn = document.getElementById('refresh-iframe');
        const restartBtn = document.getElementById('restart-service');
        const retryBtn = document.getElementById('retry-button');
        
        // 检查iframe加载状态
        if (iframe) {
            iframe.addEventListener('load', function() {
                statusDiv.classList.remove('loading');
                statusDiv.classList.add('success');
                statusText.innerHTML = '爬虫应用已加载完成，可以开始使用';
                
                // 3秒后隐藏状态提示
                setTimeout(function() {
                    statusDiv.style.display = 'none';
                }, 3000);
            });
            
            // iframe加载错误处理
            iframe.addEventListener('error', function() {
                statusDiv.classList.remove('loading');
                statusDiv.classList.add('error');
                statusText.innerHTML = '爬虫应用加载失败，请尝试刷新页面或重启服务';
            });
        }
        
        // 刷新按钮点击事件
        if (refreshBtn) {
            refreshBtn.addEventListener('click', function() {
                if (iframe) {
                    statusDiv.style.display = 'block';
                    statusDiv.classList.remove('success', 'error');
                    statusDiv.classList.add('loading');
                    statusText.innerHTML = '正在重新加载爬虫应用...';
                    
                    // 重新加载iframe
                    iframe.src = iframe.src;
                } else {
                    window.location.reload();
                }
            });
        }
        
        // 重启服务按钮点击事件
        if (restartBtn) {
            restartBtn.addEventListener('click', function() {
                restartCrawlerService();
            });
        }
        
        // 重试按钮点击事件
        if (retryBtn) {
            retryBtn.addEventListener('click', function() {
                restartCrawlerService();
            });
        }
        
        // 重启爬虫服务
        function restartCrawlerService() {
            statusDiv.style.display = 'block';
            statusDiv.classList.remove('success', 'error');
            statusDiv.classList.add('loading');
            statusText.innerHTML = '正在重启爬虫服务...';
            
            fetch('/crawler/restart')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        // 重启成功，重新加载页面
                        window.location.reload();
                    } else {
                        // 重启失败
                        statusDiv.classList.remove('loading');
                        statusDiv.classList.add('error');
                        statusText.innerHTML = '重启爬虫服务失败: ' + data.message;
                    }
                })
                .catch(error => {
                    statusDiv.classList.remove('loading');
                    statusDiv.classList.add('error');
                    statusText.innerHTML = '重启爬虫服务请求失败: ' + error;
                });
        }
        
        // 定期检查爬虫状态
        function checkCrawlerStatus() {
            fetch('/crawler/status')
                .then(response => response.json())
                .then(data => {
                    if (!data.running && iframe) {
                        statusDiv.style.display = 'block';
                        statusDiv.classList.remove('loading', 'success');
                        statusDiv.classList.add('error');
                        statusText.innerHTML = '爬虫服务已断开: ' + (data.error || '未知错误');
                    }
                })
                .catch(error => {
                    console.error('检查爬虫状态失败:', error);
                });
        }
        
        // 每30秒检查一次爬虫状态
        setInterval(checkCrawlerStatus, 30000);
    });
</script>
{% endblock %} 